[Polymer] Material Design を使った Web ページを作ってみる

諏訪悠紀

2014.06.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Material design with Polymer

Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。

ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。

デモで Material Design の世界を体験してみよう

その前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。

PC からだけではなく、モバイルなどからアクセスしてみたりすると面白いと思います。

Material Design を初めてみよう

それでは始めてみましょう。 Getting the code を見ながら、Polymer を導入してみました。

Polymer のインストール

Polymer の機能はコンポーネントという単位で細かく分かれており、作りたい Web アプリの要件に応じて取捨選択して使います。Polymer の各コンポーネントをインストールするには、次の3つの方法があります。

Bower を使ってインストールする
Zip ファイルをダウンロードしてきて使う
GitHub から Clone してきて使う

Google は、一番目の「Bower を使ってインストールする」方法を推奨しています。ということで Bower を使ってインストールしましょう。ちなみに Bower とは Web のフロントエンド用のパッケージマネージャー(Homebrew とか Gem とか npm とか CocoaPods とか Maven みたいなやつ)です。Bower は npm で提供されているので、npm のインストールも必要です。

# Bower のインストール
npm install bower -g

# 適当なフォルダを作る
mkdir sample && cd sample

# 初期化処理
bower init

# Polymer のインストール
bower install --save Polymer/polymer

# コンポーネントのインストール
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

bower init を実行するときにはプロジェクトの設定をどうするかいろいろと聞かれるので、適当に答えてください。

実装してみる

ここまでで Polymer で提供されている Material Design のコンポーネントが使える状態になったので、あとは Web ページを実装していきます。Polymer で使える Material Design のコンポーネントは↓に書いてあるので、こちらを参考に実装していく感じになると思います。

Material design with Polymer

以下は、ヘッダーとタブ(Android の ActionBar のようなもの)と標準的なコンポーネントを実装したサンプルになります。

<!DOCTYPE html>
<html>

<head>
  <meta charaset="utf-8" />
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
  <link rel="import" href="bower_components/core-icons/core-icons.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
  <link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
  <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
  <link rel="import" href="bower_components/paper-fab/paper-fab.html">
  <link rel="import" href="bower_components/paper-slider/paper-slider.html">
  <link rel="import" href="bower_components/paper-progress/paper-progress.html">
  <link rel="import" href="bower_components/paper-input/paper-input.html">
  <style type="text/css">
  body {
    font-family: sans-serif;
  }
  core-header-panel {
    background: white;
    /* height: 100% fails here on some browsers */
    height: 100vh;
    width: 100vw;
  }
  core-toolbar {
    background-color: #00bfff;
    color: #fff;
    fill: #fff;
  }
  p {
    margin: 10px;
    padding: 10px 10px;
  }
  </style>
</head>

<body fullbleed unresolved>
  <core-header-panel>
    <core-toolbar class="medium-tall">
      <paper-icon-button id="navicon" 
        icon="arrow-back"></paper-icon-button>
      <span flex>Title</span>
      <paper-icon-button id="searchbutton" 
        icon="search"></paper-icon-button>
      <paper-tabs class="bottom fit">
        <paper-tab>ONE</paper-tab>
        <paper-tab>TWO</paper-tab>
      </paper-tabs>
    </core-toolbar>
    <p><paper-button label="flat button">Button</paper-button></p>
    <p><paper-button label="raised button" raisedButton>Button</paper-button></p>
    <p><paper-checkbox></paper-checkbox></p>
    <p><paper-checkbox checked></paper-checkbox></p>
    <p><paper-toggle-button></paper-toggle-button></p>
    <p>
      <paper-radio-group selected="small">
        <paper-radio-button name="small" label="Small"></paper-radio-button>
        <paper-radio-button name="medium" label="Medium"></paper-radio-button>
        <paper-radio-button name="large" label="Large"></paper-radio-button>
      </paper-radio-group>
    </p>
    <p><paper-fab icon="favorite"></paper-fab></p>
    <p><paper-slider min="10" max="200" value="110"></paper-slider></p>
    <p><paper-progress value="10"></paper-progress></p>
    <p><paper-input label="Your Name"></paper-input></p>
  </core-header-panel>
</body>

</html>

実行結果はこんな感じです。

デモページを開く

まとめ

Material Design は「Web でも Android でも、どんなデバイスでも同様のユーザー体験が得られるようにする」という目標を掲げています。そのため、本稿で紹介したようなコンポーネントの振る舞いは、Android L などでも同様に提供してくれるようです。こちらはまた別に触れてみたいと思います。

ということは、iPhone とかでも (Webであれば) Android L と同様のユーザー体験が得られるってこと…？